<template>
  <div class="recommendations">
    <h2>相关推荐</h2>
    <ul class="recommendation-list">
      <li v-for="item in items" :key="item.id" class="recommendation-item">
        <img :src="item.image" alt="推荐内容图片" class="recommendation-image">
        <div class="recommendation-content">
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
          <span class="views">{{ item.views }} views</span>
          <button class="like-button"> {{ item.likes }}</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Recommendations',
  data() {
    return {
      items: [
        {
          id: 1,
          image: 'path/to/image1.png', // 替换为实际图片路径
          title: '奋斗百年路 启航新征程',
          description: '中国共产党三千奋斗系列微视频',
          views: 59000,
          likes: 7729
        },
        {
          id: 2,
          image: 'path/to/image2.png', // 替换为实际图片路径
          title: '自治区的由来',
          description: '智慧中小学',
          views: 5900,
          likes: 1633
        },
        // 更多项目...
      ]
    };
  }
};
</script>

<style scoped>
.recommendations {
  padding: 20px;
}

.recommendation-list {
  list-style: none;
  padding: 0;
}

.recommendation-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

.recommendation-image {
  width: 80px; /* Adjust as needed */
  height: auto;
  margin-right: 10px;
}

.recommendation-content {
  flex-grow: 1;
}

.views {
  color: #888;
}

.like-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}

.like-button:hover {
  color: #007bff;
}
</style>